<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // translate(x, y): 平移的属相，正就是右下、负就是左上
    function draw() {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        // 设置canvas元素的宽和高
        canvas.setAttribute("width", 150);
        canvas.setAttribute("height", 150);
        // 进行平移变换,这里平移的是绘制的图形的原点
        ctx.translate(0, 10);
        // 这里绘制的矩形就是以上一次平移之后的原点作为起始点
        ctx.fillRect(0, 0, 130, 130);
    }
</script>
</body>
</html>